<template>
	<view class="container_wrap">
		<wd-search v-model="searchText" @search="search" hide-cancel />
		<view class="class_wrap">
			<scroll-view scroll-y="true" class="left_scroll">
				<block v-for="(item,index) in classList">
					<view :class="classIdx==index?'li li_active':'li'" @click="selectClass(item,index)">
						{{item.name}}
					</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y="true" class="right_class_wrap">
				<view class="grade_body">
					<block v-for="item in grade_List">
						<view class="li">
							<image :src="item.url" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	import { ref } from 'vue';
	const searchText = ref<string>('');
	const search = (e) => {
		console.log(e)
	}

	const classList = ref([
		{ name: "手机" },
		{ name: "女装" },
		{ name: "装饰品" },
		{ name: "母婴" },
		{ name: "食品" },
		{ name: "进口" },
		{ name: "手机" },
		{ name: "女装" },
		{ name: "装饰品" },
		{ name: "母婴" },
		{ name: "食品" },
		{ name: "进口" },
		{ name: "手机" },
		{ name: "女装" },
		{ name: "装饰品" },
		{ name: "母婴" },
		{ name: "食品" },
		{ name: "进口" },
	]);
	const classIdx = ref(null);

	const selectClass = (e, i) => {
		classIdx.value = i;
	}

	const grade_List = ref([
		{ name: "手机壳", url: "https://img.alicdn.com/imgextra/i4/2024058652/O1CN01jQccQd2DmfLiPYQdx_!!2024058652.jpg" },
		{ name: "女装", url: "https://img.alicdn.com/imgextra/i1/2024058652/O1CN01g1A4472DmfLjdvJMW_!!2024058652.jpg" },
		{ name: "手机耳机", url: "https://gw.alicdn.com/tfs/TB1bDKoaG1s3KVjSZFAXXX_ZXXa-450-450.jpg" },
		{ name: "数据线", url: "https://img.alicdn.com/imgextra/i4/2024058652/O1CN01qE5dEk2DmfLoq0FUk_!!2024058652.jpg" },
		{ name: "充电宝", url: "https://img.alicdn.com/imgextra/i3/2024058652/O1CN01YOHEjj2DmfLopzugl_!!2024058652.jpg" },
		{ name: "手机支架", url: "https://img.alicdn.com/imgextra/i3/2024058652/O1CN01RJ2HJb2DmfLkFsHtu_!!2024058652.jpg" },
	]);
</script>

<style lang="scss" scoped>
	.class_wrap {
		@include flexBox($j: flex-start);
		/* #ifdef H5 */
		height: calc(100vh - (var(--window-top) + var(--window-bottom) + 100rpx));
		/* #endif */
		.left_scroll {
			width: 173rpx;
			flex-shrink: 0;
			background-color: #F6F7FB;
			/* #ifdef H5 */
			height: calc(100vh - (var(--window-top) + var(--window-bottom) + 100rpx));
			/* #endif */
			box-sizing: border-box;

			.li {
				width: 173rpx;
				height: 100rpx;
				color: #15161A;
				font-size: 28rpx;
				font-weight: bold;
				@include flexBox($j: center);
			}

			.li_active {
				color: #E63611;
				background-color: #fff;
			}

		}

		.right_class_wrap {
			width: calc(100% - 173rpx);
			/* #ifdef H5 */
			height: calc(100vh - (var(--window-top) + var(--window-bottom) + 100rpx));
			/* #endif */
			padding: 22rpx 12rpx;
			box-sizing: border-box;

			.grade_body {
				padding: 10rpx 13rpx;
				@include flexBox($j: flex-start, $w: wrap);

				.li {
					width: 110rpx;
					height: 200rpx;
					margin: 10rpx calc((100% - 110rpx * 3) / 3 / 2);
					@include flexBox($j: center, $r: column);

					image {
						width: 100%;
					}

					text {
						margin-top: 8rpx;
						color: #646464;
						font-size: 24rpx;
					}
				}
			}
		}


	}
</style>